<template>
    <div class="tempNothing">
       <!-- <div class="content">kkkkkkkkkkkkkkk</div> -->
        <input @change="doUpload1" ref="uploader" type="file" accept="image/*" value="" class="inputWarp" :disabled='disabled'/>

        <div style="width:100%;position:relative;background:#fff">
            <div class="add" v-show="!obj.imgUrl">
                <img :src="serverUrl+'/temp/whiteTemp.png'" alt="">
            </div>
            <div style="">
                <img :src="obj.imgUrl" class="showImg" style="width:100%;">
            </div>
        </div>

<!-- 不可编辑部分 -->
        <div class="showContent"  v-if='isshow'>
            <!-- <div class="contactConsultant" @click="concatItem">联系顾问</div>
             -->
                <img :src="serverUrl+'/temp/line-down.png'" alt="">
                <img :src="serverUrl+'/temp/temp01-1.png'" alt="">
        </div>
        <!-- 预览时不可编辑部分 -->
         <div class="hideContent" v-if='!isshow'>
             <div class="code">
                 <img :src="appcodeUrl">
             </div>
             <div class="num">
                 请填写手机号，置业顾问将以{{tel}}联络您。
             </div>
            <img :src="serverUrl+'/temp/temp01-2.png'" alt="">
        </div>
        <!-- 最底部 -->
        <div class="finalContent">
            <img :src="serverUrl+'/temp/line-up.png'" alt="" v-if='isshow' class="img_line">
            <div class="content">
                <div class="left">
                      <input @change="doUpload4" ref="uploader" type="file" accept="image/*" title="建议上传111*111的图片" value="" :disabled="disabled"/>
                    <div class="codeImg">
                        <img :src="(obj.finalImg=='' || obj.finalImg==null)?'http://skyforest.static.elab-plus.com/detail/defaultCode.png':obj.finalImg">
                    </div>
                </div>
                <div class="right">
                      <input type="text" v-model="obj.finalTitle1" class="title1" maxlength="12" :placeholder="placeholder19" title="最多不超过12个字" :disabled="disabled">
                      <div class="line"></div>
                      <input type="text" v-model="obj.finalTitle2" class="title2" maxlength="18" :placeholder="placeholder20" title="最多不超过18个字" :disabled="disabled">
                      <!-- <input type="text" v-model="finalTitle3" class="title3" maxlength="10" :placeholder="placeholder21" title="最多不超过10个字" :disabled="disabled"> -->
                </div>
            </div>
        </div>
        <div v-if="uploading" class="upload"> 正在上传</div>
    </div>
</template>
<script>
import util from "../utils/util"
import { loginService } from "@/services";
import { Toast } from "mint-ui";
export default {
    props:{
        switchTemp:Boolean,
        perviewOn:Boolean,
        updateData:String
    },
    data() {
        var serverUrl = "http://skyforest.static.elab-plus.com/";
        return {
            isshow:true, //是否显示有蒙版的不可编辑部分
            serverUrl:serverUrl,
            disabled:false,
            uploading:false,
            appcodeUrl:'',
            tel:'',
            placeholder19:'请填写标题',
            placeholder20:'请填写标题',
            obj:{
                imgUrl:null,
                // finalImg:'',
                // finalTitle1:'',
                // finalTitle2:'',
                finalImg:''

            },
             isshow:true, //是否显示有蒙版的不可编辑部分
        }
    },
    watch:{
        switchTemp(val){
            if(val){
                console.log('2222222222',this.obj)
                this.$emit('switchTempFn',this.obj)
            }
        },
       perviewOn(val){
                // console.log(val);
                this.disabled=val;
                 this.isshow=!val;
        },
        updateData(val){
            if(val){
                val = JSON.parse(val);
                this.obj=val;

            }
        }
    },
    mounted() {
        if(this.updateData){
            this.obj = JSON.parse(this.updateData);
        }
          this.appcodeUrl=localStorage.getItem('_appQrcode');
          this.tel=localStorage.getItem('_projectTel');
    },
    methods: {
       // 单张上传图片
        async doUpload1(evt){
            let files=evt.target.files;
            if(files.length===0){
                Toast('请选择需要上传的图片');
                return
            }
            let file = files[0];
            if(!file.type.match('image.*')){
                Toast('请小于5M的图片');
                return
            }
            this.uploading=true;
            let form = new FormData();
			form.append('type','qiniu_upload');
			form.append('folder','template');
			form.append('uploadFile',file)
			form.append('fileName',file.name)
            let result=await loginService.uploadFile(form);
            if(result.data.success){
                this.uploading=false;
                $('.add').css('display',"none");
                // console.log(result);
                this.obj.imgUrl=result.data.single.filepath;
                // console.log(this.Imgurl)
                Toast('图片上传成功')
            }else{
                Toast('图片上传失败');
                $('.add').css('display',"block");
            }
        },

         async doUpload4(evt){
            let files=evt.target.files;
            if(files.length===0){
                Toast('请选择需要上传的图片');
                return
            }
            let file = files[0];
            if(!file.type.match('image.*')){
                Toast('请小于5M的图片');
                return
            }
            this.uploading=true;
            let form = new FormData();
			form.append('type','qiniu_upload');
			form.append('folder','template');
			form.append('uploadFile',file)
			form.append('fileName',file.name)
            let result=await loginService.uploadFile(form);
            if(result.data.success){
                this.uploading=false;
                $('.add').css('opacity',"0");
                // console.log(result);
                this.obj.finalImg=result.data.single.filepath;
                // console.log(this.Imgurl)
                Toast('图片上传成功')
            }else{
                Toast('图片上传失败');
                // $('.add').css('opacity',"0");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.tempNothing{
    padding-top: 80px;
    font-size: 20px;
    width: 750px;
    margin: 0 auto;
    // min-height: 3200px;
    position: relative;
    text-align: center;
    // background: #fff;
    .content{


    }
    .add{
        // position:absolute;
        // padding-top:200px;
        width: 100px;
        height: 100px;
        // padding-left:325px;
        padding:250px 0 250px 325px;
        text-align: center;
        line-height: 100px;
        img{
            // z-index: 2;
        }
    }
    .inputWarp{
        position: absolute;
        top:100px;
        left:0;
        // left:50%;
        // transform: translate(0,-50%);
        width: 750px;
        height: 800px;
        z-index: 10;
        opacity: 0;
        background: none;
        border:0;
    }
    .showImg{
        // z-index: 99;
        // padding-top:160px;
        // position: absolute;
        // top:50%;
        // left: 50%;
        // width:100%;
        // height:auto;
        // z-index: 5;
        // display: block;
        // transform: translate(-50%,-50%);
    }
    .upload{
        position: fixed;
        top:50%;
        left: 50%;
        width:100px;
        height:50px;
        color:#fff;
        background:rgba(0,0,0,0.5);
        z-index:19;
        text-align:center;
        line-height:50px;
    }
     .showContent{
            width:100%;
            // height:1200px;
            background: #fff;
            img{
                width: 100%;
                   display: block;
                margin:0;
                padding:0;
            }
        }
        .hideContent{
            width:100%;
            // height:1200px;
            background: #fff;
            // display:none;
            position: relative;
            .code{
                width:220px ;
                height: 220px;
                // border:1px solid;
                position: absolute;
                left:265px;
                top:620px;
                z-index: 99;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .num{
                color:#fff;
                width: 600px;
                height:40px;
                line-height: 40px;
                position: absolute;
                top:50px;
                // left:40px;
                // border:1px solid;
                z-index: 99;
            }
            img{
                width: 100%;
                display: block;
                margin:0;
                padding:0;
            }
        }
        .finalContent{
            width:100%;
            height:214px;
             background: #CDC9BE;
             .img_line{
                width: 100%;
                display: block;
                margin:0;
                padding:0;
            }
            .content{
                height:184px;
                .left{
                    width: 18%;
                    height: 100%;
                    float:left;
                      position:relative;
                    input{
                        width: 111px;
                        height: 111px;
                        background:none;
                        border:0;
                        top:27px;
                        left:40px;
                        opacity:0;
                        z-index: 99;
                        // margin:27px 0 0 40px;
                        position:absolute;

                    }
                    .codeImg{
                        width: 111px;
                        height: 111px;
                        background: #fff;
                        margin:27px 0 0 40px;
                        position: relative;
                        img{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top:0;
                            left:0;
                        }
                    }
                }
                .right{
                    width: 75%;
                    height: 100%;
                    float:left;
                    input{
                        height:40px;
                        background:none;
                        border:0;
                        width:90%;
                        margin-left:5%;
                        display:block;
                        color: #737373;
                        // font-size: 34px;
                        // margin-top:80px;
                        // text-align:center;
                    }
                    .title1{
                        margin-top: 60px;
                        font-size: 28px;
                    }
                    .line{
                        width: 60%;
                        margin-left:5%;
                        height: 1px;
                        background: #737373;
                    }
                     .title2{
                        font-size: 24px;
                    }
                     .title3{
                        font-size: 24px;
                    }
                }
            }
        }
}
</style>
